<!-- EchartsBase.vue -->
<template>
    <div class="echart-container">
      <v-chart autoresize :option="finalOption" :judge-width="true" />
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  import type { EChartsOption } from 'echarts'
  
  interface Props {
    /* 外部可以完全接管 option */
    option?: Partial<EChartsOption>
    /* 也可以通过下面几个快捷字段让组件帮你拼 option */
    title?: string
    colors?: string[]
    legend?: string[]
    xAxis?: string[]
    series?: any[]
  }
  
  const props = withDefaults(defineProps<Props>(), {
    option: () => ({}),
    title: '',
    colors: () => [],
    legend: () => [],
    xAxis: () => [],
    series: () => []
  })
  
  /* 如果外部给了完整 option，直接用它；否则用快捷字段自动拼一个最小可用 option */
  const finalOption = computed((): EChartsOption => {
    if (Object.keys(props.option).length) return props.option as EChartsOption
  
    return {
      color: props.colors,
      title: { text: props.title, left: 'center' },
      tooltip: { trigger: 'axis' },
      legend: { data: props.legend, top: 30 },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: { type: 'category', data: props.xAxis },
      yAxis: { type: 'value' },
      series: props.series
    }
  })
  </script>
  
  <style scoped>
  .echart-container {
    width: 100%;
    color:#fff;
  }
  </style>